<template>
  <div class="box">
    <Inputt @add="add"></Inputt>
    <List :arr="arr" @del="del"></List>
  </div>
</template>

<script>
export default {
  components: {
    Inputt: require('./Inputt.vue').default,
    List: require('./List.vue').default,
  },
  data() {
    return {
      arr: [
        {
          src: require('./face1.gif'),
          name: '用不上线',
          content: '新增删除广播功能。',
          time: '07月05日 15:14',
        },
        {
          src: require('./face2.gif'),
          name: '用不上线',
          content: '新增选择头像功能。',
          time: '07月05日 15:14',
        },
        {
          src: require('./face3.gif'),
          name: '用不上线',
          content: '新增记录广播时间功能。',
          time: '07月05日 15:14',
        },
      ],
    }
  },
  methods: {
    del(index) {
      this.arr.splice(index, 1)
    },
    add(obj) {
      this.arr.unshift(obj)
    },
  },
}
</script>

<style>
@import url('./animate.css@3.5.1.css');
.box {
  width: 500px;
  height: 561px;
  border-radius: 5px;
  background: #fff;
}
</style>
